<template>
	<view class="edit-nfc u-p-20">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :model="nfcInfo" :rules="rules" ref="form1" labelWidth="100">
			<u-form-item required label="IC卡名称" prop="nfcName" borderBottom ref="item1">
				<u--input inputAlign="right" placeholder="请输入IC卡名称" v-model="nfcInfo.nfcName" border="none"></u--input>
			</u-form-item>
			<u-form-item required label="IC卡号" prop="nfcCode" borderBottom ref="item1">
				<u--input inputAlign="right" placeholder="请输入IC卡号" type="number" v-model="nfcInfo.nfcCode" border="none" :disabled="nfcInfo.id"></u--input>
			</u-form-item>
			<u-form-item required label="IC状态" prop="nfcStatus" borderBottom ref="item1">
				<view class="radio-box">
					<view>
						<u-radio-group v-model="nfcInfo.nfcStatus" placement="row">
							<u-radio :customStyle="{ marginRight: '16rpx' }" v-for="(item, index) in statusList" :key="index" :label="item.name" :name="item.id"></u-radio>
						</u-radio-group>
					</view>
				</view>
			</u-form-item>
			<u-form-item label="持卡人名称" prop="nfcCardholder" borderBottom ref="item1">
				<u--input inputAlign="right" placeholder="请输入持卡人名称" v-model="nfcInfo.nfcCardholder" border="none"></u--input>
			</u-form-item>
			<u-form-item label="持卡人年龄" prop="nfcCardholderAge" borderBottom ref="item1">
				<u--input inputAlign="right" placeholder="请输入持卡人年龄" type="number" v-model="nfcInfo.nfcCardholderAge" border="none"></u--input>
			</u-form-item>
			<u-form-item label="持卡人手机号" prop="nfcCardholderPhone" borderBottom ref="item1">
				<u--input inputAlign="right" placeholder="请输入持卡人手机号" type="number" v-model="nfcInfo.nfcCardholderPhone" border="none"></u--input>
			</u-form-item>
			<u-form-item label="性别" prop="nfcCardholderSex" borderBottom @click="showSex = true" ref="item1">
				<u--input
					:value="nfcInfo.nfcCardholderSex === 1 ? '男' : '女'"
					inputAlign="right"
					disabled
					disabledColor="#ffffff"
					placeholder="请选择持卡人性别"
					border="none"
				></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
		</u--form>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择持卡人性别" @close="showSex = false" @select="sexSelect"></u-action-sheet>
		<bottomBtn title="保存" @change="sumbit" />
	</view>
</template>

<script>
import bottomBtn from '@/components/bottomBtn.vue';
export default {
	components: { bottomBtn },
	onLoad(option) {
		if (option.id) this.getInfo(option.id);
	},
	data() {
		return {
			showSex: false,
			nfcInfo: {
				nfcCardholderSex: 1,
				nfcStatus: 1
			},
			actions: [
				{
					name: '男',
					id: 1
				},
				{
					name: '女',
					id: 2
				}
			],
			rules: {
				nfcName: {
					type: 'string',
					required: true,
					message: '请填写卡片名称',
					trigger: ['blur', 'change']
				},
				nfcCode: {
					type: 'string',
					required: true,
					message: '请填写卡号',
					trigger: ['blur', 'change']
				}
			},
			statusList: [
				{
					name: '启用',
					id: 1
				},
				{
					name: '禁用',
					id: 2
				}
			]
		};
	},
	methods: {
		// 选择性别
		sexSelect(e) {
			this.nfcInfo.nfcCardholderSex = e.id;
			this.$refs.form1.validateField('userInfo.nfcCardholderSex');
		},
		// 获取用户的IC卡列表
		async getInfo(id) {
			const res = await this.$api.nfc.info({ id });
			this.nfcInfo = res.data;
		},
		// 提交数据 有id 为编辑 无id为新增
		async sumbit() {
			await this.$refs.form1.validate();
			if (this.nfcInfo.id) {
				const res = await this.$api.nfc.edit(this.nfcInfo);
				this.returnBack(res);
			} else {
				const res = await this.$api.nfc.nfcBind(this.nfcInfo);
				this.returnBack(res);
			}
		},
		// 操作成功后返回
		returnBack(res) {
			if (res.code === 200) {
				this.$u.toast('保存成功');
				setTimeout(() => {
					uni.navigateBack({
						delta: -1
					});
				}, 500);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.edit-nfc {
	background: #fff;
	.radio-box {
		display: flex;
		justify-content: flex-end;
	}
}
</style>
